{% extends 'base1.html' %}
{% load static %}

{% block title %}{% endblock %}

{% block css %}
    {% static 'css/login.css' %}
{% endblock %}

{% block main_block %}
<style>
.form-signin {
    max-width: 400px;
    margin: 5rem auto;
    padding: 2rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.form-signin h1 {
    font-weight: 300;
    font-size: 2.2rem;
    color: #2c3e50;
    letter-spacing: 1px;
    margin-bottom: 1.5rem;
}

.form-signin p {
    color: #7f8c8d;
    margin-bottom: 2rem;
}

.form-signin a {
    color: #3498db;
    transition: color 0.3s;
}

.form-signin a:hover {
    color: #2980b9;
    text-decoration: none;
}

.input-group {
    margin-bottom: 1.5rem;
    border-radius: 8px;
    transition: all 0.3s;
}

.input-group:focus-within {
    box-shadow: 0 0 0 2px rgba(52,152,219,0.2);
}

.input-group-addon {
    background: #f8f9fa;
    border: 1px solid #ecf0f1;
    border-right: none;
    border-radius: 8px 0 0 8px;
    color: #95a5a6;
}

.form-control {
    height: 50px;
    border: 1px solid #ecf0f1;
    border-left: none;
    border-radius: 0 8px 8px 0;
    padding: 0.75rem 1rem;
    transition: all 0.3s;
}

.form-control:focus {
    box-shadow: none;
    border-color: #ecf0f1;
    background: #f8f9fa;
}

.btn-primary {
    background: #2c3e50;
    border: none;
    padding: 12px;
    font-size: 1rem;
    letter-spacing: 0.5px;
    border-radius: 8px;
    transition: all 0.3s;
}

.btn-primary:hover {
    background: #34495e;
    transform: translateY(-2px);
}

.btn-block {
    margin: 0.5rem 0;
}

.row {
    margin: 0 -5px;
}

.col-6 {
    padding: 0 5px;
}

@media (max-width: 576px) {
    .form-signin {
        margin: 2rem auto;
        padding: 1.5rem;
    }
    
    .form-signin h1 {
        font-size: 1.8rem;
    }
}
</style>

<div class="container">
    <form class="form-signin" action="" method="POST">
        {% csrf_token %}
        <div class="text-center mb-4">
            <h1 class="mb-4">实验药品管理系统</h1>
            <p class="text-muted">欢迎登录，未注册请先 <a href="{% url 'Lab:register' %}">立即注册</a></p>
        </div>

        <div class="input-group">
            <div class="input-group-addon">
                <i class="fas fa-user"></i>
            </div>
            <input type="text" class="form-control" placeholder="用户名" name="username" required>
        </div>

        <div class="input-group">
            <div class="input-group-addon">
                <i class="fas fa-lock"></i>
            </div>
            <input type="password" class="form-control" placeholder="密码" name="password" required>
        </div>

        <div class="mt-4">
            <button class="btn btn-primary btn-block" type="submit">立即登录</button>
            <a href="{% url 'Lab:register' %}" class="btn btn-outline-secondary btn-block">用户注册</a>
        </div>
    </form>
</div>
{% endblock %}